大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。
成果影片：
程式碼如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="calculator">
<input id="display" readonly>
<div id="keys">
<button onclick="appendToDisplay('+')" class="operator-btn">+</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator-btn">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')" class="operator-btn">x</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('/')" class="operator-btn">/</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()" class="operator-btn">C</button>
</div>
</div>
<script src="index.js" > //使其無法輸入文字，只能輸入數字。
</script>
</body>
</html>
CSS
body{
margin: 0;
display: left;
justify-content: center;
align-items: center;
height: 100vh;
background-color: white ;
}
#calculator{
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(255, 246, 204);
border-radius: 15px;
max-width: 500px;
overflow: hidden;
border: none;
}
#display{
width: 100%;
padding: 20px;
font-size: 5rem;
text-align: left;
border: none;
background-color: rgb(224, 179, 134);
color: white;
}
#keys{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 25px;
}
button{
width: 100px;
height: 100px;
border-radius: 50px;
border: none;
background-color: rgb(224, 179, 134);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
}
button:hover{
background-color:rgb(234, 204, 174);
}
button:active{
background-color:rgb(245, 230, 214);
}
.operator-btn{
background-color:rgb(255, 157, 77);
}
.operator-btn:hover {
background-color:rgb(255, 188, 133);
}
JavaScript
const display = document.getElementById("display");
function appendToDisplay(input){
display.value += input;
}
function clearDisplay(){
display.value="";
}
function calculate(){
try{
display.value = eval(display.value);
}catch(error){
display.value = "Error";
}
}
學習筆記：
JS eval function:如果參數(String)為表達式，將計算參數，但如果為JS的方法或語句，將執行這些程式碼。
HTML redonly(屬性):使輸入欄位只能被系統讀取，不能被使用者修改(可以複製)。
CSS grid-template-columns(屬性):指網格佈局中的列數（和寬度）。
CSS grid-template-rows(屬性):指網格佈局中的行數（和寬度）。
grid-template-columns: 20px 10px 60px 50px;
//表示將網頁的布局分成四列，且寬度分別為20px、10px、60px、50px。
CSS repeat function:幾乎只使用在grid-template-columns和grid-template-rows這兩個function上，因為當需要布局的列數(行數)超過一定數量，為了省略過多重覆的程式碼，可以使用repeat function達到重複的動作。
//假設需要依照前面所述的寬度，重複五次，共20列，程式碼如下:
grid-template-columns: repeat(5 , 20px 10px 60px 50px);
//repeat(重複的次數 , 欲重複的列數寬度)
學習資源:
開發一個簡單的 JavaScript 應用（計算器）
https://www.w3schools.com/jsref/jsref_eval.asp
https://www.w3schools.com/tags/att_input_readonly.asp
https://www.w3schools.com/cssref/pr_grid-template-columns.php
iThome鐵人賽
看影片追技術